import React, { useState , useEffect } from "react";
import '../Sales/sellState.css'
import ShowDataBlock from '../../../components/ShowDataBlock/ShowDataBlock'
import { DatePicker, Table, Button, Modal, Input ,Form} from 'antd';
import moment from 'moment';
import GetToday from '../../../utils/ShowToday'
import onExportBasicExcel from '../../../utils/ExportExcel'
import axios from "../../../http/index";



const SellState = function () {
  const dateFormat = 'YYYY/MM/DD';
  const [DataBlockList,setDataBlockList] = useState([])
  const [TableList,setTableList] = useState([])
  const [form] = Form.useForm();
  const [isModalOpen,setIsModalOpen] = useState(false)
  const DateStr = GetToday()

  const GetData = () => {
    axios({
      url: "/data/inventory",
      method: "GET",
      data: {
        currentPage: 1
      },
    })
    .then((res) => {
      setDataBlockList(res.data.dataBlockList)
      setTableList(res.data.tableList)
    })
    .catch((err) => {
      console.log(err);
    });
  }
  
  useEffect(() => {
    GetData()
  },[])

  const columns = [
    {
      title: '销售日期',
      dataIndex: 'SaleDate',
      key: 'SaleDate',
    },
    {
      title: '销售商品',
      dataIndex: 'SaleGoods',
      key: 'SaleGoods',
    },
    {
      title: '客户',
      dataIndex: 'Costumer',
      key: 'Costumer',
    },
    {
      title: '销售金额',
      dataIndex: 'SalePrice',
      key: 'SalePrice',
    },
    {
      title: '销售数量',
      dataIndex: 'SaleTotal',
      key: 'SaleTotal',
    },
  ]

  const ChangeDateStr = (date,dateString) => {
    GetData()
  }

  const NewPagination = {
    total: TableList.length,
    showTotal: ((total) => {
      return `合计：  ${total} 条`;
    }),
  }

  const ExportFile = () => {
    setIsModalOpen(true)
  }
  const handleOk = (col, List, name) => {
    name = name || 'demo'
    onExportBasicExcel(col, List, name)
    setIsModalOpen(false)
    form.resetFields()
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    form.resetFields()
  }
  
  return (
    <div className="saleContent">
      <p className="SellState_Title">销售汇总</p>
      <DatePicker defaultValue={moment(DateStr, dateFormat)} format={dateFormat}  onChange={ChangeDateStr} />
      <div>
        <div  className="SellState_SubTitleBox">
          <p className="BlueGap"></p><p className="SellState_SubTitle">销售情况</p>
        </div>
        <ShowDataBlock BlockArray={DataBlockList}></ShowDataBlock>
      </div>
      <div>
        <div  className="SellState_SubTitleBox ButtonPosition">
          <p className="BlueGap"></p><p className="SellState_SubTitle">销售明细</p>
          <div className="OutButton">
            <Button type="primary" size="small" onClick={() => ExportFile()}>导出</Button>
          </div>
        </div>
        <Table dataSource={TableList} columns={columns} pagination={NewPagination} />
      </div>

      <Modal title="导出" open={isModalOpen} onOk={() => handleOk(columns, TableList, form.getFieldsValue().fileName)} onCancel={handleCancel}>
        <Form form={form}>
          <Form.Item
            name="fileName"
            label="文件名"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input placeholder="请输入文件名字"></Input>
          </Form.Item>
        </Form>
      </Modal>

    </div>
  )
}

export default SellState;